<template>
  <div class="home-page">
    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 轮播图部分 -->
      <section class="banner-section mb-24">
        <div class="banner-wrapper relative">
          <Carousel
            ref="carousel"
            :items="bannerItems"
            :height="'450px'"
            :autoplay="true"
            :interval="5000"
            :show-caption="true"
            :show-controls="true"
            :show-overlay="true"
            :show-secondary-button="true"
            :imagefit="'cover'"
            :customIndicator="true"
            :indicator-position="'none'"
            :arrow="'never'"
            :trigger="'click'"
            :loop="true"
            @action="handleBannerAction"
            @secondary-action="handleBannerSecondaryAction"
          />
        </div>
      </section>

      <!-- 快速导航 -->
      <section class="quick-nav container mx-auto px-4 -mt-20 relative z-10">
        <div class="nav-grid">
          <div
            v-for="item in quickNavItems"
            :key="item.id"
            class="nav-item"
            @click="$router.push(item.path)"
          >
            <el-icon class="nav-icon"><component :is="item.icon" /></el-icon>
            <span class="nav-text">{{ item.title }}</span>
            <span class="nav-desc">{{ item.description }}</span>
          </div>
        </div>
      </section>

      <!-- 主要内容和侧边栏容器 -->
      <div class="container mx-auto px-4 py-12">
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- 左侧主要内容区 -->
          <div class="flex-1">
            <!-- 景点推荐 -->
            <section class="spots-section container mx-auto px-4 py-12">
              <SectionTitle
                title="精选景点"
                subtitle="FEATURED SPOTS"
                description="发现贵港最美的风景"
                :show-more="true"
                more-text="查看全部景点"
                @more="$router.push('/spots')"
              />
              <div v-if="featuredSpots.length > 0" class="spots-grid">
                <div
                  v-for="spot in featuredSpots"
                  :key="spot.id"
                  class="spot-card group"
                  @click="$router.push(`/spots/${spot.id}`)"
                >
                  <div class="relative overflow-hidden">
                    <el-image
                      :src="spot.image"
                      :alt="spot.title"
                      class="spot-image transition-transform duration-300 group-hover:scale-110"
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon><Picture /></el-icon>
                        </div>
                      </template>
                    </el-image>
                    <div
                      class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent"
                    >
                      <h3 class="spot-title text-white mb-1">
                        {{ spot.title }}
                      </h3>
                      <div class="flex items-center justify-between">
                        <span class="price text-white"
                          >{{ spot.price > 0 ? `¥${spot.price}起` : '免费' }}</span
                        >
                        <el-rate
                          :model-value="Number(spot.rating)"
                          disabled
                          :max="5"
                          allow-half
                          :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                          :void-icon="Star"
                          :void-color="'rgba(255,255,255,0.4)'"
                          :score-template="`${spot.rating}`"
                          text-color="#ffffff"
                          class="spot-rating"
                          show-score
                          :decimal-place="1"
                        />
                      </div>
                    </div>
                    <div class="absolute top-2 right-2">
                      <el-button
                        circle
                        class="favorite-btn"
                        :class="{ 'is-favorite': spot.isFavorite }"
                        @click.stop="toggleFavorite(spot)"
                      >
                        <el-icon><Star /></el-icon>
                      </el-button>
                    </div>
                  </div>
                  <div class="spot-info p-4">
                    <p class="spot-desc text-gray-600 line-clamp-2">
                      {{ spot.description }}
                    </p>
                    <div class="spot-tags mt-2">
                      <el-tag
                        v-for="tag in spot.tags.slice(0, 3)"
                        :key="tag"
                        size="small"
                        class="mr-2"
                        >{{ tag }}</el-tag
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="flex justify-center items-center py-16">
                <div v-if="loading" class="text-center">
                  <el-icon class="animate-spin text-3xl text-primary-500 mb-2"><Loading /></el-icon>
                  <p class="text-gray-500">加载精选景点中...</p>
                </div>
                <div v-else class="text-center">
                  <el-icon class="text-5xl text-gray-300 mb-2"><Picture /></el-icon>
                  <p class="text-gray-500">暂无精选景点</p>
                  <el-button class="mt-4" @click="fetchFeaturedSpots">刷新</el-button>
                </div>
              </div>
            </section>

            <!-- 特色体验 -->
            <section class="experiences-section py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="特色体验"
                  subtitle="FEATURED EXPERIENCES"
                  description="独特的贵港文化体验"
                  :show-more="true"
                  more-text="查看全部体验"
                  @more="$router.push('/experiences')"
                />
                <div
                  v-if="featuredExperiences.length > 0"
                  class="experiences-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                >
                  <div
                    v-for="exp in featuredExperiences"
                    :key="exp.id"
                    class="experience-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
                    @click="$router.push(`/experiences/${exp.id}`)"
                  >
                    <div class="relative overflow-hidden">
                      <el-image
                        :src="exp.image"
                        class="w-full aspect-[16/9] transition-transform duration-300"
                        fit="cover"
                      />
                      <div class="absolute top-4 left-4">
                        <el-tag
                          :type="
                            exp.status === 'booking' ? 'success' : 'warning'
                          "
                        >
                          {{ exp.status === "booking" ? "可预订" : "名额告罄" }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="p-4">
                      <h3
                        class="text-lg font-medium mb-2 text-gray-900 dark:text-white"
                      >
                        {{ exp.title }}
                      </h3>
                      <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
                        {{ exp.description }}
                      </p>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center">
                          <el-avatar
                            :size="24"
                            :src="exp.host.avatar"
                            class="mr-2"
                          />
                          <span
                            class="text-sm text-gray-500 dark:text-gray-400"
                            >{{ exp.host.name }}</span
                          >
                        </div>
                        <div
                          class="text-primary-600 dark:text-primary-400 font-medium"
                        >
                          ¥{{ exp.price }}起
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="flex justify-center items-center py-16">
                  <div v-if="loading" class="text-center">
                    <el-icon class="animate-spin text-3xl text-primary-500 mb-2"><Loading /></el-icon>
                    <p class="text-gray-500">加载特色体验中...</p>
                  </div>
                  <div v-else class="text-center">
                    <el-icon class="text-5xl text-gray-300 mb-2"><Brush /></el-icon>
                    <p class="text-gray-500">暂无特色体验</p>
                    <el-button class="mt-4" @click="fetchFeaturedExperiences">刷新</el-button>
                  </div>
                </div>
              </div>
            </section>

            <!-- 文创好物 -->
            <section class="products-section py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="文创好物"
                  subtitle="CULTURAL PRODUCTS"
                  description="精选贵港特色文创产品"
                  :show-more="true"
                  more-text="进入商城"
                  @more="$router.push('/shop')"
                />
                <div
                  v-if="featuredProducts.length > 0"
                  class="products-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                >
                  <ProductCard
                    v-for="product in featuredProducts"
                    :key="product.id"
                    :product="product"
                    @favorite="handleProductFavorite"
                    @add-to-cart="handleAddToCart"
                    @buy-now="handleBuyNow"
                  />
                </div>
                <!-- 加载中 -->
                <div v-else-if="loading" class="flex justify-center items-center py-12">
                  <el-skeleton animated :rows="3" :loading="true">
                    <template #template>
                      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
                        <div v-for="i in 3" :key="i" class="product-skeleton">
                          <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
                          <div class="mt-4">
                            <el-skeleton-item variant="h3" style="width: 80%" />
                            <el-skeleton-item variant="text" style="width: 60%; margin-top: 8px" />
                            <el-skeleton-item variant="text" style="width: 30%; margin-top: 8px" />
                            <div class="flex justify-between mt-4">
                              <el-skeleton-item variant="text" style="width: 25%" />
                              <el-skeleton-item variant="button" style="width: 40%" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                <!-- 空状态 -->
                <div v-else class="empty-products flex flex-col items-center justify-center py-8">
                  <el-empty description="暂无文创商品">
                    <el-button type="primary" @click="fetchFeaturedProducts">刷新</el-button>
                  </el-empty>
                </div>
              </div>
            </section>

            <!-- 精选酒店 -->
            <section class="hotels-section py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="精选酒店"
                  subtitle="FEATURED HOTELS"
                  description="贵港优质住宿推荐"
                  :show-more="true"
                  more-text="查看全部酒店"
                  @more="$router.push('/hotel')"
                />
                <div
                  v-if="featuredHotels.length > 0"
                  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                >
                  <div
                    v-for="hotel in featuredHotels"
                    :key="hotel.id"
                    class="hotel-card bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
                    @click="$router.push(`/hotel/${hotel.id}`)"
                  >
                    <!-- 酒店图片 -->
                    <div class="relative">
                      <el-image
                        :src="hotel.image"
                        fit="cover"
                        class="w-full h-48 rounded-t-xl"
                      />
                      <div class="absolute top-4 right-4">
                        <el-button
                          circle
                          :type="hotel.isFavorite ? 'danger' : ''"
                          :icon="hotel.isFavorite ? 'Star' : 'StarFilled'"
                          @click.stop="toggleHotelFavorite(hotel)"
                        />
                      </div>
                    </div>

                    <!-- 酒店信息 -->
                    <div class="p-4">
                      <h3
                        class="text-xl font-bold text-gray-900 dark:text-white mb-2 line-clamp-1"
                      >
                        {{ hotel.name }}
                      </h3>
                      <div class="flex items-center gap-2 mb-2">
                        <el-rate
                          :model-value="Number(hotel.rating)"
                          disabled
                          :max="5"
                          allow-half
                          :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                          :void-icon="Star"
                          :void-color="'rgba(128,128,128,0.4)'"
                          :score-template="`${hotel.rating}`"
                          text-color="#ff9900"
                          class="hotel-rating"
                          show-score
                          :decimal-place="1"
                        />
                        <span class="text-gray-500"
                          >({{ hotel.reviewCount }}点评)</span
                        >
                      </div>
                      <p
                        class="text-gray-600 dark:text-gray-400 text-sm mb-3 line-clamp-1"
                      >
                        {{ hotel.address }}
                      </p>
                      <div class="flex flex-wrap gap-2 mb-4">
                        <el-tag
                          v-for="tag in hotel.tags.slice(0, 3)"
                          :key="tag"
                          size="small"
                          :type="getTagType(tag)"
                          effect="light"
                        >
                          {{ tag }}
                        </el-tag>
                      </div>
                      <div class="flex items-center justify-between">
                        <div class="text-2xl font-bold text-primary-600">
                          ¥{{ hotel.price }}
                          <span class="text-sm text-gray-500">起</span>
                        </div>
                        <el-button
                          type="primary"
                          @click.stop="$router.push(`/hotel/${hotel.id}`)"
                        >
                          查看详情
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 加载中状态 -->
                <div v-else-if="loading" class="flex justify-center items-center py-12">
                  <el-skeleton animated :rows="3" :loading="true">
                    <template #template>
                      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
                        <div v-for="i in 3" :key="i" class="hotel-skeleton">
                          <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
                          <div class="mt-4">
                            <el-skeleton-item variant="h3" style="width: 80%" />
                            <el-skeleton-item variant="text" style="width: 60%; margin-top: 8px" />
                            <el-skeleton-item variant="text" style="width: 30%; margin-top: 8px" />
                            <div class="flex justify-between mt-4">
                              <el-skeleton-item variant="text" style="width: 25%" />
                              <el-skeleton-item variant="button" style="width: 40%" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                <!-- 空状态 -->
                <div v-else class="empty-hotels flex flex-col items-center justify-center py-8">
                  <el-empty description="暂无酒店数据">
                    <el-button type="primary" @click="fetchFeaturedHotels">刷新</el-button>
                  </el-empty>
                </div>
              </div>
            </section>

            <!-- 旅游攻略 -->
            <section class="guides-section container mx-auto px-4 py-12">
              <SectionTitle
                title="旅游攻略"
                subtitle="TRAVEL GUIDES"
                description="专业的旅游攻略和游玩建议"
                :show-more="true"
                more-text="查看更多攻略"
                @more="$router.push({ name: 'TravelGuides' })"
              />
              <div class="guides-grid">
                <div
                  v-for="guide in travelGuides"
                  :key="guide.id"
                  class="guide-card"
                  @click="
                    $router.push({
                      name: 'TravelGuideDetail',
                      params: { id: guide.id },
                    })
                  "
                >
                  <div class="guide-content">
                    <div class="guide-header">
                      <el-avatar :src="guide.author.avatar" />
                      <div class="author-info">
                        <span class="author-name">{{ guide.author.name }}</span>
                        <span class="publish-time">{{
                          guide.publishTime
                        }}</span>
                      </div>
                    </div>
                    <h3 class="guide-title">{{ guide.title }}</h3>
                    <p class="guide-summary">{{ guide.summary }}</p>
                    <div class="guide-stats">
                      <span class="stat-item">
                        <el-icon><View /></el-icon>
                        {{ formatNumber(guide.views) }}
                      </span>
                      <span class="stat-item">
                        <el-icon><Star /></el-icon>
                        {{ formatNumber(guide.likes) }}
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ formatNumber(guide.comments) }}
                      </span>
                    </div>
                  </div>
                  <el-image :src="guide.cover" class="guide-cover" />
                </div>
              </div>
            </section>

            <!-- 美食推荐 -->
            <section class="food-section py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="特色美食"
                  subtitle="FEATURED FOOD"
                  description="探索贵港地道美食，品味舌尖上的风味"
                  :show-more="true"
                  more-text="查看全部美食"
                  @more="$router.push('/food')"
                />
                <div
                  v-if="featuredFood.length > 0"
                  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                >
                  <div
                    v-for="food in featuredFood"
                    :key="food.id"
                    class="food-card bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
                    @click="$router.push(`/food/${food.id}`)"
                  >
                    <div class="relative">
                      <el-image
                        :src="food.image"
                        class="w-full h-48 object-cover"
                        fit="cover"
                      >
                        <template #placeholder>
                          <div class="image-placeholder">
                            <el-icon><Picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <div class="absolute top-2 right-2">
                        <el-tag
                          size="small"
                          :type="food.isRecommended ? 'danger' : ''"
                          effect="light"
                        >
                          {{ food.isRecommended ? "推荐" : "美食" }}
                        </el-tag>
                      </div>
                      <div 
                        class="absolute top-2 left-2 w-8 h-8 rounded-full bg-white/80 dark:bg-black/50 flex items-center justify-center cursor-pointer hover:bg-white dark:hover:bg-black transition-colors"
                        @click.stop="toggleFoodFavorite(food)"
                      >
                        <el-icon :class="{ 'text-red-500': food.isFavorite }">
                          <Star />
                        </el-icon>
                      </div>
                    </div>
                    <div class="p-4">
                      <h3
                        class="text-lg font-medium text-gray-900 dark:text-white mb-2 line-clamp-1"
                      >
                        {{ food.name }}
                      </h3>
                      <p
                        class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2"
                      >
                        {{ food.description }}
                      </p>
                      <div class="flex items-center justify-between text-sm">
                        <div
                          class="flex items-center text-gray-500 dark:text-gray-400"
                        >
                          <el-icon class="mr-1"><Location /></el-icon>
                          {{ food.location }}
                        </div>
                        <div
                          class="flex items-center gap-3 text-gray-500 dark:text-gray-400"
                        >
                          <span class="flex items-center">
                            <el-icon class="mr-1"><View /></el-icon>
                            {{ formatNumber(food.views) }}
                          </span>
                          <span class="flex items-center">
                            <el-icon class="mr-1"><Star /></el-icon>
                            {{ formatNumber(food.likes) }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 加载中状态 -->
                <div v-else-if="loading" class="flex justify-center items-center py-12">
                  <el-skeleton animated :rows="3" :loading="true">
                    <template #template>
                      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
                        <div v-for="i in 3" :key="i" class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-sm">
                          <el-skeleton-item variant="image" style="width: 100%; height: 200px" />
                          <div class="p-4">
                            <el-skeleton-item variant="h3" style="width: 50%" />
                            <el-skeleton-item variant="text" style="margin-top: 16px" />
                            <el-skeleton-item variant="text" style="width: 80%" />
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                
                <!-- 空状态 -->
                <div v-else class="flex flex-col items-center justify-center py-12">
                  <el-empty description="暂无美食数据" />
                  <el-button type="primary" @click="fetchFeaturedFood" class="mt-4">刷新</el-button>
                </div>
              </div>
            </section>

            <!-- 新闻资讯 -->
            <section class="news-section py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="新闻资讯"
                  subtitle="NEWS & INFORMATION"
                  description="了解贵港文旅最新动态"
                  :show-more="true"
                  more-text="查看全部资讯"
                  @more="$router.push('/news')"
                />
                <div class="news-grid">
                  <div
                    v-for="news in latestNews"
                    :key="news.id"
                    class="news-card"
                    @click="$router.push(`/news/${news.id}`)"
                  >
                    <el-image :src="news.image" class="news-image" />
                    <div class="news-content">
                      <div class="news-meta">
                        <span class="news-category">{{ news.category }}</span>
                        <span class="news-date">{{ news.date }}</span>
                      </div>
                      <h3 class="news-title">{{ news.title }}</h3>
                      <p class="news-summary">{{ news.summary }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 用户评价 -->
            <section class="reviews-section container mx-auto px-4 py-12">
              <SectionTitle
                title="游客点评"
                subtitle="VISITOR REVIEWS"
                description="听听他们怎么说"
                :show-more="true"
                more-text="进入社区"
                @more="$router.push('/community')"
              />
              <div class="reviews-grid">
                <div
                  v-for="review in userReviews.slice(0, 3)"
                  :key="review.id"
                  class="review-card"
                >
                  <div class="review-header">
                    <el-avatar
                      :size="48"
                      :src="review.user.avatar"
                      class="review-avatar"
                    />
                    <div class="review-user">
                      <span class="user-name">{{ review.user.name }}</span>
                      <el-rate
                        :model-value="Number(review.rating)"
                        disabled
                        :max="5"
                        allow-half
                        :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                        :void-icon="Star"
                        :void-color="'rgba(128,128,128,0.4)'"
                        :score-template="`${review.rating}`"
                        text-color="#ff9900"
                        class="review-rating"
                        show-score
                        :decimal-place="1"
                      />
                    </div>
                  </div>
                  <p class="review-content">{{ review.content }}</p>
                  <div class="review-footer">
                    <span class="review-spot">
                      <el-icon><Location /></el-icon>
                      {{ review.spot }}
                    </span>
                    <span class="review-time">
                      <el-icon><Clock /></el-icon>
                      {{ review.time }}
                    </span>
                  </div>
                </div>
              </div>
            </section>

            <!-- 摄影打卡 -->
            <section class="photography-spots py-12">
              <div class="container mx-auto px-4">
                <SectionTitle
                  title="摄影打卡"
                  subtitle="探索贵港最美打卡地，定格精彩瞬间"
                  :show-more="true"
                  more-text="更多打卡地"
                  @more="$router.push('/photography')"
                />

                <div
                  v-if="photographySpots.length > 0"
                  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8"
                >
                  <!-- 热门打卡地 -->
                  <div
                    v-for="spot in photographySpots"
                    :key="spot.id"
                    class="spot-card group bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
                    @click="$router.push(`/photography/${spot.id}`)"
                  >
                    <div class="relative">
                      <el-image
                        :src="spot.image"
                        class="w-full aspect-[4/3] object-cover transform group-hover:scale-105 transition-transform duration-500"
                      />
                      <div class="absolute top-4 right-4">
                        <el-tag
                          :type="getTagType(spot.type)"
                          effect="light"
                          class="!border-0"
                        >
                          {{ spot.type }}
                        </el-tag>
                      </div>
                      <div
                        class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4"
                      >
                        <h3 class="text-white text-lg font-medium mb-1">
                          {{ spot.name }}
                        </h3>
                        <div class="flex items-center text-white/80 text-sm">
                          <el-icon class="mr-1"><Sunrise /></el-icon>
                          <span>最佳拍摄：{{ spot.bestTime }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="p-4">
                      <div class="flex items-center justify-between mb-3">
                        <div
                          class="flex items-center text-sm text-gray-500 dark:text-gray-400"
                        >
                          <el-icon class="mr-1"><Camera /></el-icon>
                          <span>{{ formatNumber(spot.checkInCount) }}次打卡</span>
                      </div>
                      <div
                          class="flex items-center text-sm text-gray-500 dark:text-gray-400"
                        >
                          <el-icon class="mr-1"><Picture /></el-icon>
                          <span>{{ formatNumber(spot.photoCount) }}张照片</span>
                        </div>
                      </div>
                      <p
                        class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2"
                      >
                        {{ spot.description }}
                      </p>
                      </div>
                        </div>
                      </div>
                
                <!-- 加载中 -->
                <div v-else-if="loading" class="flex justify-center items-center py-12">
                  <el-skeleton animated :rows="3" :loading="true">
                    <template #template>
                      <div class="w-full">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                          <el-skeleton-item
                            v-for="i in 3"
                            :key="i"
                            variant="image"
                            class="w-full h-64"
                          />
                    </div>
                  </div>
                    </template>
                  </el-skeleton>
                </div>

                <!-- 空状态 -->
                <div
                  v-else
                  class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400"
                >
                  <el-icon :size="48" class="mb-4"><Picture /></el-icon>
                  <p>暂无摄影打卡地数据</p>
                </div>

                <!-- 用户作品展示 -->
                <div class="mt-12">
                  <h3
                    class="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center"
                  >
                    <el-icon class="mr-2"><PictureFilled /></el-icon>
                    精选用户作品
                  </h3>
                  <div v-if="photographyWorks.length > 0" class="grid grid-cols-6 gap-6">
                    <div
                      v-for="work in photographyWorks"
                      :key="work.id"
                      class="user-photo-card group relative aspect-square rounded-lg overflow-hidden cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 bg-white dark:bg-gray-800"
                      @click="$router.push(`/photography/works/${work.id}`)"
                    >
                      <el-image
                        :src="work.imageUrl"
                        class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
                        fit="cover"
                      >
                        <template #error>
                          <div
                            class="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-800"
                          >
                            <el-icon class="text-3xl text-gray-400"
                              ><Picture
                            /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <div
                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-3"
                      >
                        <div class="text-white">
                          <div class="text-sm font-medium mb-1">
                            @{{ work.authorName }}
                          </div>
                          <div class="flex items-center text-xs">
                            <el-icon class="mr-1"><Star /></el-icon>
                            <span>{{ formatNumber(work.likes) }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else-if="loading" class="flex justify-center items-center py-6">
                    <el-skeleton animated :rows="1" :loading="true">
                      <template #template>
                        <div class="w-full">
                          <div class="grid grid-cols-6 gap-6">
                            <el-skeleton-item
                              v-for="i in 6"
                              :key="i"
                              variant="image"
                              class="w-full aspect-square"
                            />
                          </div>
                        </div>
                      </template>
                    </el-skeleton>
                  </div>
                  <div
                    v-else
                    class="flex flex-col items-center justify-center py-6 text-gray-500 dark:text-gray-400"
                  >
                    <el-icon :size="36" class="mb-2"><PictureFilled /></el-icon>
                    <p>暂无精选用户作品</p>
                  </div>
                </div>
              </div>
            </section>
          </div>

          <!-- 右侧侧边栏 -->
          <div class="sidebar lg:w-80 flex-shrink-0">
            <div class="sidebar-sticky space-y-6">
              <!-- 天气预报 -->
              <div class="sidebar-card">
                <div
                  class="weather-card bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg text-white p-6"
                >
                  <div class="flex items-center justify-between">
                    <div>
                      <h3 class="text-2xl font-medium mb-2">贵港</h3>
                      <p class="text-lg">
                        {{ weather.date }} {{ weather.week }}
                      </p>
                    </div>
                    <div class="text-center">
                      <div class="text-5xl font-light mb-2">
                        {{ weather.temperature }}°
                      </div>
                      <p>{{ weather.weather }}</p>
                    </div>
                    <div class="text-right">
                      <p class="mb-2">湿度: {{ weather.humidity }}%</p>
                      <p>{{ weather.wind }}</p>
                    </div>
                  </div>
                  <div class="mt-6 grid grid-cols-5 gap-4">
                    <div
                      v-for="forecast in weather.forecast"
                      :key="forecast.date"
                      class="text-center"
                    >
                      <p class="text-sm">{{ forecast.date }}</p>
                      <el-icon class="my-2 text-2xl"
                        ><component :is="forecast.icon"
                      /></el-icon>
                      <p class="text-sm">{{ forecast.temperature }}°</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 实用工具 -->
              <div class="sidebar-card">
                <h3 class="sidebar-title">实用工具</h3>
                <div class="grid grid-cols-2 gap-4">
                  <div
                    v-for="tool in tools"
                    :key="tool.id"
                    class="tool-card bg-white dark:bg-gray-800 p-4 rounded-lg text-center cursor-pointer hover:shadow-lg transition-all"
                    @click="handleToolClick(tool)"
                  >
                    <el-icon class="tool-icon text-primary-600">
                      <component :is="tool.icon" />
                    </el-icon>
                    <h4 class="text-sm font-medium mb-1">{{ tool.name }}</h4>
                    <p class="text-xs text-gray-600 dark:text-gray-400">
                      {{ tool.description }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import SectionTitle from "@/components/global/SectionTitle.vue";
import Carousel from "@/components/global/Carousel.vue";
import ProductCard from "@/components/global/ProductCard.vue";
import {
  Picture,
  View,
  Star,
  ChatDotRound,
  Location,
  Ticket,
  Guide,
  ShoppingBag,
  Clock,
  Calendar,
  Sunny,
  Cloudy,
  Lightning,
  Rain,
  Van,
  House,
  Service,
  ArrowLeft,
  ArrowRight,
  Food,
  Microphone,
  Camera,
  PictureFilled,
  Sunrise,
  Loading,
  Brush,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
import service from "@/api/axios"; // 修正导入axios服务
import { useUserStore } from "@/stores/user";

// 配置dayjs
dayjs.extend(relativeTime);
dayjs.locale("zh-cn");

const router = useRouter();
const userStore = useUserStore();

// 轮播图数据
const bannerItems = [
  {
    id: 1,
    image:
      "https://p1.itc.cn/q_70/images01/20231125/b98fabf40ea849b08f3df75852ab13d4.jpeg",
    title: "探索贵港之美",
    description: "感受历史文化魅力，品味自然山水风光",
    link: "/spots",
    linkText: "立即探索",
    secondaryText: "了解更多",
  },
  {
    id: 2,
    image:
      "https://p2.itc.cn/q_70/images01/20231125/894d50dc08414d29bf329204efb21f14.jpeg",
    title: "文化瑰宝",
    description: "感受贵港深厚的文化底蕴",
    link: "/shop",
    linkText: "文创商城",
    secondaryText: "了解更多",
  },
  {
    id: 3,
    image:
      "https://q0.itc.cn/q_70/images01/20240715/32428427dedd4011966b129ca259709d.jpeg",
    title: "新闻资讯",
    description: "了解贵港最新动态",
    link: "/news",
    linkText: "查看资讯",
    secondaryText: "了解更多",
  },
];

// 快速导航数据
const quickNavItems = [
  {
    id: 1,
    title: "景点门票",
    description: "特惠预订",
    icon: "Ticket",
    path: "/spots",
  },
  {
    id: 2,
    title: "导游服务",
    description: "专业讲解",
    icon: "Guide",
    path: "/tour-guide",
  },
  {
    id: 3,
    title: "文创商城",
    description: "特色好物",
    icon: "ShoppingBag",
    path: "/shop",
  },
  {
    id: 4,
    title: "景区地图",
    description: "智能导航",
    icon: "Location",
    path: "/map",
  },
];

// 精选景点数据
const featuredSpots = ref([]);

// 文创产品数据
const featuredProducts = ref([]);

// 旅游攻略数据
const travelGuides = ref([
  {
    id: 1,
    title: "贵港两日游完美攻略",
    summary: "48小时玩转贵港，必去景点和美食推荐",
    cover:
      "https://pic.rmb.bdstatic.com/bjh/news/0cdda2a9b19b5477d1b599a12fcf2786.jpeg",
    author: {
      name: "旅行达人",
      avatar:
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.NeyQZQSf_qGUIO6omEf_yAHaQJ?w=115&h=187&c=7&r=0&o=5&pid=1.7",
    },
    publishTime: "2024-01-15",
    views: 12580,
    likes: 326,
    comments: 89,
  },
  // ... 更多攻略
]);

// 新闻资讯数据
const latestNews = ref([
  {
    id: 1,
    title: "贵港举办首届文化旅游节",
    summary: "展示贵港特色文化旅游资源，推动文旅融合发展",
    image:
      "https://img2.baidu.com/it/u=938758873,3782559401&fm=253&fmt=auto&app=138&f=JPEG?w=992&h=500",
    category: "活动资讯",
    date: "2024-01-20",
  },
  // ... 更多新闻
]);

// 用户评价数据
const userReviews = ref([
  {
    id: 1,
    user: {
      name: "快乐游客",
      avatar:
        "",
    },
    rating: parseFloat("5.0"),
    content: "贵港园博园真是太美了，花卉品种丰富，环境优美，非常适合全家出游！",
    spot: "贵港园博园",
    images: [
      "https://img2.baidu.com/it/u=3530018750,1063099629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
    ],
    time: "2024-03-15 14:30",
  },
  {
    id: 2,
    user: {
      name: "悠闲旅者",
      avatar:
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.ZmUdtKPn53EdfuCwGfKpywHaD_?w=309&h=180&c=7&r=0&o=5&pid=1.7",
    },
    rating: parseFloat("4.5"),
    content: "江滨公园的夜景很美，沿江步道很适合散步，晚上凉爽舒适。",
    spot: "江滨公园",
    images: [
      "https://qcloud.dpfile.com/pc/URfPyYdcrtHiOUOtHJfSV94yfPqTYRMZqYL_NE1OHHkqliLLGSN0FzL6604CTVAS.jpg",
    ],
    time: "2024-03-14 20:15",
  },
]);

// 特色体验数据
const featuredExperiences = ref([]);

// 目的地数据
const destinations = ref([
  {
    id: 1,
    name: "贵港博物馆",
    description: "了解贵港历史文化的重要窗口",
    image:
      "https://ts1.tc.mm.bing.net/th/id/R-C.d56f1116bf2d4d226d21b6f53cf6d51d?rik=WXRZtuBR9%2bTw0g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20118%2f629%2fw881h548%2f20230204%2f14e8-03ebdfa4074123e683bbbc7eb4489370.jpg&ehk=qoH%2fZ9JGmw8lZm99ZnGTN1TrncnG9JOj%2fuDUrZ4C4QA%3d&risl=&pid=ImgRaw&r=0",
    location: "贵港市港北区",
    visitCount: 25678,
  },
  {
    id: 2,
    name: "江滨公园",
    description: "城市地标性景观公园",
    image:
      "https://k.sinaimg.cn/n/sinakd20200528ac/195/w590h405/20200528/9ecb-iufmpmn5124588.jpg/w700d1q75cms.jpg?by=cms_fixed_width",
    location: "贵港市港北区",
    visitCount: 45892,
  },
]);

// 实用工具数据
const tools = ref([
  {
    id: 1,
    name: "一键求助",
    description: "紧急情况快速联系",
    icon: "Service",
    path: "/help",
  },
  {
    id: 2,
    name: "语音导览",
    description: "AI智能语音讲解",
    icon: "Microphone",
    path: "/audio-guide",
  },
  {
    id: 3,
    name: "活动日历",
    description: "近期文旅活动预告",
    icon: "Calendar",
    path: "/events",
  },
  {
    id: 4,
    name: "停车指南",
    description: "景区周边停车攻略",
    icon: "Van",
    path: "/parking",
  },
]);

// 天气数据
const weather = ref({
  date: "2024-03-20",
  week: "星期三",
  temperature: 23,
  weather: "晴",
  humidity: 65,
  wind: "东南风 3级",
  forecast: [
    { date: "3/21", temperature: 24, icon: "Sunny" },
    { date: "3/22", temperature: 25, icon: "Cloudy" },
    { date: "3/23", temperature: 22, icon: "Lightning" },
    { date: "3/24", temperature: 21, icon: "Rain" },
    { date: "3/25", temperature: 23, icon: "Sunny" },
  ],
});

// 获取天气数据
const fetchWeatherData = async () => {
  try {
    loading.value = true;
    // 贵港市的经纬度坐标
    const latitude = 23.1135; // 贵港市纬度
    const longitude = 110.2964; // 贵港市经度
    
    // 使用Open-Meteo API获取天气数据
    const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_sum,windspeed_10m_max&current_weather=true&timezone=Asia/Shanghai&forecast_days=6`);
    
    const data = await response.json();
    console.log("天气API响应:", data);
    
    if (data && data.current_weather && data.daily) {
      // 获取今天日期
      const today = new Date();
      const dateFormatter = new Intl.DateTimeFormat('zh-CN', { month: 'numeric', day: 'numeric' });
      const weekFormatter = new Intl.DateTimeFormat('zh-CN', { weekday: 'short' });
      
      // 获取当前温度和天气代码
      const currentTemp = Math.round(data.current_weather.temperature);
      const weatherCode = data.current_weather.weathercode;
      
      // 根据天气代码获取天气描述和图标
      const weatherInfo = getWeatherInfo(weatherCode);
      
      // 处理未来几天天气预报
      const forecasts = [];
      for (let i = 1; i < Math.min(6, data.daily.time.length); i++) {
        const forecastDate = new Date(data.daily.time[i]);
        const forecastCode = data.daily.weathercode[i];
        const forecastInfo = getWeatherInfo(forecastCode);
        const maxTemp = Math.round(data.daily.temperature_2m_max[i]);
        
        forecasts.push({
          date: dateFormatter.format(forecastDate),
          temperature: maxTemp,
          icon: forecastInfo.icon,
        });
      }
      
      // 更新天气数据
      weather.value = {
        date: dateFormatter.format(today),
        week: weekFormatter.format(today),
        temperature: currentTemp,
        weather: weatherInfo.description,
        humidity: Math.round(Math.random() * 30) + 50, // 湿度数据Open-Meteo免费版不提供，用随机值替代
        wind: `${getWindDirection(data.current_weather.winddirection)} ${Math.round(data.current_weather.windspeed)}km/h`,
        forecast: forecasts
      };
    }
  } catch (error) {
    console.error("获取天气数据失败:", error);
    // 使用默认天气数据
  } finally {
    loading.value = false;
  }
};

// 根据天气代码获取天气描述和图标
const getWeatherInfo = (code) => {
  // WMO天气代码对照表：https://www.nodc.noaa.gov/archive/arc0021/0002199/1.1/data/0-data/HTML/WMO-CODE/WMO4677.HTM
  const weatherMap = {
    0: { description: '晴朗', icon: 'Sunny' },
    1: { description: '晴间多云', icon: 'Sunny' },
    2: { description: '局部多云', icon: 'Sunny' },
    3: { description: '多云', icon: 'Cloudy' },
    45: { description: '雾', icon: 'Cloudy' },
    48: { description: '霾', icon: 'Cloudy' },
    51: { description: '小毛毛雨', icon: 'Rain' },
    53: { description: '毛毛雨', icon: 'Rain' },
    55: { description: '大毛毛雨', icon: 'Rain' },
    56: { description: '冻毛毛雨', icon: 'Rain' },
    57: { description: '大冻毛毛雨', icon: 'Rain' },
    61: { description: '小雨', icon: 'Rain' },
    63: { description: '中雨', icon: 'Rain' },
    65: { description: '大雨', icon: 'Rain' },
    66: { description: '冻雨', icon: 'Rain' },
    67: { description: '大冻雨', icon: 'Rain' },
    71: { description: '小雪', icon: 'Rain' },
    73: { description: '中雪', icon: 'Rain' },
    75: { description: '大雪', icon: 'Rain' },
    80: { description: '小阵雨', icon: 'Rain' },
    81: { description: '中阵雨', icon: 'Rain' },
    82: { description: '大阵雨', icon: 'Rain' },
    95: { description: '雷暴', icon: 'Lightning' },
    96: { description: '雷暴伴有小冰雹', icon: 'Lightning' },
    99: { description: '雷暴伴有大冰雹', icon: 'Lightning' }
  };
  
  return weatherMap[code] || { description: '未知', icon: 'Sunny' };
};

// 根据风向角度获取风向描述
const getWindDirection = (degree) => {
  const directions = ['北风', '东北风', '东风', '东南风', '南风', '西南风', '西风', '西北风'];
  const index = Math.round((degree % 360) / 45) % 8;
  return directions[index];
};

// 获取推荐景点
const fetchFeaturedSpots = async () => {
  loading.value = true;
  try {
    // 调用景点API，获取列表数据
    const params = {
      pageSize: 6,  // 只获取6个景点用于首页展示
      sort: "rating" // 按评分排序，展示最高评分的景点
    };
    
    const res = await service.get('/public/spot/list', { params });
    console.log("首页景点API响应:", res);
    
    // 处理API响应数据
    let spotsData = [];
    
    // 检查所有可能的数据结构模式
    if (res.data && res.data.content && Array.isArray(res.data.content)) {
      // 直接在res.data中有content数组
      spotsData = [...res.data.content];
    } 
    else if (res.data && res.data.code === 200 && res.data.data && res.data.data.content && Array.isArray(res.data.data.content)) {
      // 嵌套在data.data.content
      spotsData = [...res.data.data.content];
    }
    else if (res.data && res.data.data && res.data.data.records && Array.isArray(res.data.data.records)) {
      // MyBatis-Plus分页格式
      spotsData = [...res.data.data.records];
    }
    else if (res.data && res.data.data && Array.isArray(res.data.data)) {
      // data直接是数组
      spotsData = [...res.data.data];
    }
    else if (res.data && Array.isArray(res.data)) {
      // res.data直接是数组
      spotsData = [...res.data];
    }
    
    // 如果有数据，更新景点数据
    if (spotsData.length > 0) {
      // 处理数据，确保字段名称一致
      featuredSpots.value = spotsData.slice(0, 6).map(spot => ({
        id: spot.id,
        title: spot.name,
        image: spot.coverImage || spot.cover || spot.image,
        price: spot.price || 0,
        rating: parseFloat(spot.rating || "4.5"),
        reviewCount: spot.visitCount || spot.reviewCount || 1000,
        tags: spot.tags || (spot.category ? [getCategoryName(spot.category)] : []),
        description: spot.description || "美丽的贵港景点",
        isFavorite: spot.isFavorite || false
      }));
    }
  } catch (error) {
    console.error("获取推荐景点失败:", error);
    // 出错时保持使用默认数据
  } finally {
    loading.value = false;
  }
};

// 获取分类名称的辅助函数
const getCategoryName = (categoryValue) => {
  // 默认分类映射
  const defaultCategories = {
    'nature': '自然风光',
    'cultural': '人文古迹',
    'historical': '历史文化',
    'theme': '主题乐园',
    'religious': '宗教寺庙',
    'water': '水上景观',
    'museum': '博物馆',
    'park': '公园',
    'garden': '花园'
  };
  
  return defaultCategories[categoryValue] || categoryValue;
};

// 获取目的地数据
const fetchDestinations = async () => {
  try {
    // TODO: 调用目的地API
    // const response = await api.getDestinations();
    // destinations.value = response.data;
  } catch (error) {
    console.error("获取目的地数据失败:", error);
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchWeatherData(),
    fetchFeaturedSpots(),
    fetchFeaturedExperiences(),
    fetchFeaturedProducts(),
    fetchFeaturedHotels(),
    fetchDestinations(),
    fetchFeaturedFood(),
    fetchPhotographySpots(), // 添加获取摄影打卡数据
    fetchPhotographyWorks(), // 添加获取精选摄影作品
  ]);
});

// 处理轮播图点击
const handleBannerAction = (item) => {
  if (item.link) {
    router.push(item.link);
  }
};

// 处理轮播图次要按钮点击
const handleBannerSecondaryAction = (item) => {
  // 可以根据需要添加更多功能
  ElMessage.info("了解更多功能开发中...");
};

// 处理商品收藏
const handleProductFavorite = (product) => {
  ElMessage.success(product.isFavorite ? "已添加到收藏" : "已取消收藏");
};

// 处理加入购物车
const handleAddToCart = (product) => {
  ElMessage.success("已添加到购物车");
};

// 处理立即购买
const handleBuyNow = (product) => {
  router.push({
    path: `/shop/product/${product.id}`,
  });
};

// 格式化数字
const formatNumber = (num) => {
  return new Intl.NumberFormat().format(num);
};

// 处理工具点击
const handleToolClick = (tool) => {
  router.push(tool.path);
};

// 处理景点收藏
const toggleFavorite = (spot) => {
  spot.isFavorite = !spot.isFavorite;
  ElMessage.success(spot.isFavorite ? "已添加到收藏" : "已取消收藏");
};

// 处理酒店收藏
const toggleHotelFavorite = async (hotel) => {
  if (!userStore.token) {
    ElMessageBox.confirm("需要登录才能继续操作,是否前往登录?", "提示", {
      confirmButtonText: "去登录",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        router.push({
          path: "/login",
          query: { redirect: router.currentRoute.value.fullPath },
        });
      })
      .catch(() => {});
    return;
  }

  try {
    if (hotel.isFavorite) {
      // 取消收藏
      await service.delete(`/user/favorites/${hotel.id}`);
      hotel.isFavorite = false;
      ElMessage.success("已取消收藏");
    } else {
      // 添加收藏
      await service.post("/user/favorites", { hotelId: hotel.id });
      hotel.isFavorite = true;
      ElMessage.success("已添加到收藏");
    }
  } catch (error) {
    console.error("收藏操作失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 获取酒店数据
const featuredHotels = ref([]);

// 获取酒店数据
const fetchFeaturedHotels = async () => {
  loading.value = true;
  try {
    // 调用酒店API
    const params = {
      pageSize: 3, // 首页只显示3个精选酒店
      sort: "rating", // 按评分排序，展示最高评分的酒店
      isRecommended: true // 获取推荐酒店
    };
    
    const response = await service.get("/public/hotels", { params });
    console.log("首页酒店API响应:", response);
    
    // 处理API响应数据
    let hotelsData = [];
    
    // 检查各种可能的数据结构
    if (response.data && response.data.data && Array.isArray(response.data.data)) {
      hotelsData = [...response.data.data];
    } 
    else if (response.data && response.data.content && Array.isArray(response.data.content)) {
      hotelsData = [...response.data.content];
    }
    else if (response.data && response.data.code === 200 && response.data.data && response.data.data.content && Array.isArray(response.data.data.content)) {
      hotelsData = [...response.data.data.content];
    }
    else if (response.data && response.data.data && response.data.data.records && Array.isArray(response.data.data.records)) {
      hotelsData = [...response.data.data.records];
    }
    else if (response.data && Array.isArray(response.data)) {
      hotelsData = [...response.data];
    }
    
    // 如果有数据，更新酒店数据
    if (hotelsData.length > 0) {
      featuredHotels.value = hotelsData.slice(0, 3).map(hotel => ({
        id: hotel.id,
        name: hotel.name,
        image: hotel.image || hotel.coverImage || hotel.cover,
        price: hotel.price || 299,
        rating: parseFloat(hotel.rating || "4.5"),
        reviewCount: hotel.reviewCount || hotel.visitCount || 1000,
        address: hotel.address || "贵港市区",
        tags: hotel.tags || (hotel.category ? [hotel.category] : ["舒适型"]),
        isFavorite: hotel.isFavorite || false
      }));
    } else {
      // 如果没有获取到数据，使用默认数据
      featuredHotels.value = [
  {
    id: 1,
    name: "贵港大酒店",
          image: "https://userimg.qunarzz.com/imgs/201607/18/C._M0DCiy5azxoo-jDi480s.jpg",
    price: 288,
    rating: parseFloat("4.7"),
    reviewCount: 1580,
    address: "贵港市港北区市中心广场1号",
    tags: ["四星级", "商务出行"],
          isFavorite: false
  },
  {
    id: 2,
    name: "贵港温德姆酒店",
          image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.gYxS_UhxrTike1bXmhO8DwHaE8?w=249&h=180&c=7&r=0&o=5&pid=1.7",
    price: 468,
    rating: parseFloat("4.9"),
    reviewCount: 2100,
    address: "贵港市港北区金港大道168号",
    tags: ["五星级", "豪华享受"],
          isFavorite: false
        }
      ];
    }
    
    // 如果用户已登录，检查哪些酒店已被收藏
    if (userStore.token) {
      await checkHotelFavoriteStatus();
    }
  } catch (error) {
    console.error("获取酒店数据失败:", error);
    // 使用默认数据
    featuredHotels.value = [
      {
        id: 1,
        name: "贵港大酒店",
        image: "https://userimg.qunarzz.com/imgs/201607/18/C._M0DCiy5azxoo-jDi480s.jpg",
        price: 288,
        rating: parseFloat("4.7"),
        reviewCount: 1580,
        address: "贵港市港北区市中心广场1号",
        tags: ["四星级", "商务出行"],
        isFavorite: false
      },
      {
        id: 2,
        name: "贵港温德姆酒店",
        image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.gYxS_UhxrTike1bXmhO8DwHaE8?w=249&h=180&c=7&r=0&o=5&pid=1.7",
        price: 468,
        rating: parseFloat("4.9"),
        reviewCount: 2100,
        address: "贵港市港北区金港大道168号",
        tags: ["五星级", "豪华享受"],
        isFavorite: false
      }
    ];
  } finally {
    loading.value = false;
  }
};

// 检查酒店收藏状态
const checkHotelFavoriteStatus = async () => {
  if (!userStore.token || featuredHotels.value.length === 0) return;
  
  try {
    const response = await service.get("/user/favorites/status", {
      params: {
        hotelIds: featuredHotels.value.map(hotel => hotel.id).join(",")
      }
    });
    
    if (response && Array.isArray(response)) {
      // 更新收藏状态
      featuredHotels.value.forEach(hotel => {
        hotel.isFavorite = response.includes(hotel.id);
      });
    }
  } catch (error) {
    console.error("获取酒店收藏状态失败:", error);
  }
};

// 获取酒店数据
const fetchHotels = async () => {
  try {
    // TODO: 调用酒店API
    // const response = await api.getHotels();
    // featuredHotels.value = response.data;
  } catch (error) {
    console.error("获取酒店数据失败:", error);
  }
};

// 页面加载时获取酒店数据
onMounted(async () => {
  await fetchHotels();
});

// 获取酒店标签类型
const getTagType = (tag) => {
  const types = {
    // 酒店类型
    豪华: "success",
    海景: "success",
    温泉: "success",
    度假: "success",
    经济: "warning",
    青年: "warning",
    
    // 摄影打卡地类型
    "人气打卡地": "danger",
    "网红打卡点": "warning", 
    "新晋打卡地": "success",
    "自然风光": "info",
    "人文景观": ""
  };
  return types[tag] || "default";
};

// 美食数据
const featuredFood = ref([]);

// 获取特色美食
const fetchFeaturedFood = async () => {
  loading.value = true;
  try {
    // 调用美食API获取数据
    const params = {
      pageSize: 3, // 首页只显示3个特色美食
      isRecommended: true, // 获取推荐的美食
      sort: "views" // 按浏览量排序，展示最热门美食
    };
    
    const res = await service.get('/public/foods', { params });
    console.log("首页特色美食API响应:", res);
    
    // 处理API响应数据
    let foodData = [];
    
    // 检查各种可能的数据结构
    if (res.data && res.data.content && Array.isArray(res.data.content)) {
      foodData = [...res.data.content];
    } 
    else if (res.data && res.data.code === 200 && res.data.data && res.data.data.content && Array.isArray(res.data.data.content)) {
      foodData = [...res.data.data.content];
    }
    else if (res.data && res.data.data && res.data.data.records && Array.isArray(res.data.data.records)) {
      foodData = [...res.data.data.records];
    }
    else if (res.data && res.data.data && Array.isArray(res.data.data)) {
      foodData = [...res.data.data];
    }
    else if (res.data && Array.isArray(res.data)) {
      foodData = [...res.data];
    }
    
    // 如果有数据，更新美食数据
    if (foodData.length > 0) {
      featuredFood.value = foodData.slice(0, 3).map(food => ({
        id: food.id,
        name: food.name || food.title,
        description: food.description || "贵港地道美食，品味舌尖上的风味",
        image: food.image || food.coverImage || food.cover,
        category: food.category || "特色美食",
        location: food.location || "贵港市区",
        isRecommended: food.isRecommended || true,
        views: food.views || Math.floor(Math.random() * 19500) + 500, // 如果没有提供，生成随机值
        likes: food.likes || Math.floor(Math.random() * 2950) + 50, // 如果没有提供，生成随机值
      }));
    } else {
      // 如果没有获取到数据，使用默认数据
      featuredFood.value = [
  {
    id: 1,
    name: "贵港艇仔粥",
    description: "使用新鲜的河鲜熬制，口感鲜美，是贵港最具特色的传统美食之一。",
          image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.Kba2Vq6jAJ-3pgeVzXTDygHaEY?w=306&h=181&c=7&r=0&o=5&pid=1.7",
    category: "特色小吃",
    location: "贵港市港北区",
    isRecommended: true,
    views: 15680,
    likes: 2360,
  },
  {
    id: 2,
    name: "荷叶粉",
          description: "采用上等大米制作，配以特制酱料，清香可口，是贵港传统风味小吃。",
          image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.i6EWNrdeQ91frGNOyLl8hAHaFj?w=260&h=195&c=7&r=0&o=5&pid=1.7",
    category: "传统美食",
    location: "贵港市港南区",
    isRecommended: true,
    views: 12460,
    likes: 1890,
  },
  {
    id: 3,
    name: "贵港酿豆腐",
    description: "选用上等豆腐，搭配新鲜肉馅，口感细腻，香味四溢。",
          image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.RoAoaon7k2OyTRNPktoYywHaE7?w=306&h=204&c=7&r=0&o=5&pid=1.7",
    category: "地方特色",
    location: "贵港市覃塘区",
    isRecommended: false,
    views: 10240,
    likes: 1560,
  },
      ];
    }
  } catch (error) {
    console.error("获取特色美食失败:", error);
    // 使用默认数据
    featuredFood.value = [
      {
        id: 1,
        name: "贵港艇仔粥",
        description: "使用新鲜的河鲜熬制，口感鲜美，是贵港最具特色的传统美食之一。",
        image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.Kba2Vq6jAJ-3pgeVzXTDygHaEY?w=306&h=181&c=7&r=0&o=5&pid=1.7",
        category: "特色小吃",
        location: "贵港市港北区",
        isRecommended: true,
        views: 15680,
        likes: 2360,
      },
      {
        id: 2,
        name: "荷叶粉",
        description: "采用上等大米制作，配以特制酱料，清香可口，是贵港传统风味小吃。",
        image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.i6EWNrdeQ91frGNOyLl8hAHaFj?w=260&h=195&c=7&r=0&o=5&pid=1.7",
        category: "传统美食",
        location: "贵港市港南区",
        isRecommended: true,
        views: 12460,
        likes: 1890,
      },
      {
        id: 3,
        name: "贵港酿豆腐",
        description: "选用上等豆腐，搭配新鲜肉馅，口感细腻，香味四溢。",
        image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.RoAoaon7k2OyTRNPktoYywHaE7?w=306&h=204&c=7&r=0&o=5&pid=1.7",
        category: "地方特色",
        location: "贵港市覃塘区",
        isRecommended: false,
        views: 10240,
        likes: 1560,
      },
    ];
  } finally {
    loading.value = false;
  }
};

// 加载状态
const loading = ref(false);

// 处理轮播图加载状态
const handleLoading = (status) => {
  loading.value = status;
};

// 获取特色体验
const fetchFeaturedExperiences = async () => {
  try {
    // 调用体验API获取特色体验数据
    const params = {
      pageSize: 3, // 首页只显示3个特色体验
      isHot: true, // 获取热门体验
      sort: "recommended" // 按推荐排序
    };
    
    const res = await service.get('/public/experiences', { params });
    console.log("首页特色体验API响应:", res);
    
    // 处理API响应数据
    let experiencesData = [];
    
    // 检查各种可能的数据结构
    if (res.data && res.data.content && Array.isArray(res.data.content)) {
      experiencesData = [...res.data.content];
    } 
    else if (res.data && res.data.code === 200 && res.data.data && res.data.data.content && Array.isArray(res.data.data.content)) {
      experiencesData = [...res.data.data.content];
    }
    else if (res.data && res.data.data && res.data.data.records && Array.isArray(res.data.data.records)) {
      experiencesData = [...res.data.data.records];
    }
    else if (res.data && res.data.data && Array.isArray(res.data.data)) {
      experiencesData = [...res.data.data];
    }
    else if (res.data && Array.isArray(res.data)) {
      experiencesData = [...res.data];
    }
    
    // 如果有数据，更新体验数据
    if (experiencesData.length > 0) {
      featuredExperiences.value = experiencesData.slice(0, 3).map(exp => ({
        id: exp.id,
        title: exp.title || exp.name,
        description: exp.description || "精彩的贵港文化体验",
        image: exp.image || exp.coverImage || exp.cover,
        status: exp.status || "booking",
        price: exp.price || 99,
        host: {
          name: exp.host?.name || "体验主办方",
          avatar: exp.host?.avatar || "/images/avatars/default.jpg"
        }
      }));
    } else {
      // 如果没有获取到数据，使用默认数据
      featuredExperiences.value = [
        {
          id: 1,
          title: "贵港陶艺制作体验",
          description: "跟随陶艺大师学习传统陶艺技艺，创作专属作品",
          image: "https://img0.baidu.com/it/u=2694669272,1198075742&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
          status: "booking",
          price: 128,
          host: {
            name: "张师傅",
            avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=174&h=180&c=7&r=0&o=5&pid=1.7",
          }
        },
        {
          id: 2,
          title: "非遗扎染工艺课程",
          description: "体验贵港特色扎染工艺，制作独一无二的艺术品",
          image: "https://qcloud.dpfile.com/pc/GTHl1ow6io5ZbRfhYPT15O9DtE3oqMj6HEbJHVwvFiatWC9vM0aQA9t1m2PuU1xU.jpg",
          status: "booking",
          price: 168,
          host: {
            name: "李师傅",
            avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=174&h=180&c=7&r=0&o=5&pid=1.7",
          }
        },
        {
          id: 3,
          title: "古法造纸工艺展示",
          description: "了解传统造纸工艺，亲手制作手工纸",
          image: "https://img0.baidu.com/it/u=687784245,3212647291&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          status: "full",
          price: 98,
          host: {
            name: "王师傅",
            avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=174&h=180&c=7&r=0&o=5&pid=1.7",
          }
        }
      ];
    }
  } catch (error) {
    console.error("获取特色体验失败:", error);
    // 出错时保持使用默认数据
  }
};

// 获取文创商品
const fetchFeaturedProducts = async () => {
  loading.value = true;
  try {
    // 调用商品API获取数据
    const params = {
      pageSize: 3, // 首页只显示3个文创商品
      sort: "sales" // 按销量排序，展示最热销商品
    };
    
    const res = await service.get('/public/shop/products', { params });
    console.log("首页文创商品API响应:", res);
    
    // 处理API响应数据
    let productsData = [];
    
    // 检查各种可能的数据结构
    if (res.data && res.data.content && Array.isArray(res.data.content)) {
      productsData = [...res.data.content];
    } 
    else if (res.data && res.data.code === 200 && res.data.data && res.data.data.content && Array.isArray(res.data.data.content)) {
      productsData = [...res.data.data.content];
    }
    else if (res.data && res.data.data && res.data.data.records && Array.isArray(res.data.data.records)) {
      productsData = [...res.data.data.records];
    }
    else if (res.data && res.data.data && Array.isArray(res.data.data)) {
      productsData = [...res.data.data];
    }
    else if (res.data && Array.isArray(res.data)) {
      productsData = [...res.data];
    }
    
    // 如果有数据，更新商品数据
    if (productsData.length > 0) {
      // 处理数据，确保字段名称一致
      featuredProducts.value = productsData.slice(0, 3).map(product => ({
        id: product.id,
        title: product.title || product.name,
        description: product.description || product.brief || "贵港特色文创商品",
        image: product.image || product.coverImage || product.cover,
        price: product.price || 199,
        originalPrice: product.originalPrice || product.price * 1.2,
        sales: product.sales || product.soldCount || 0,
        rating: parseFloat(product.rating || "4.8"),
        reviewCount: product.reviewCount || 0,
        tags: product.tags || [],
        isFavorite: product.isFavorite || false
      }));
    } else {
      // 如果没有获取到数据，使用默认数据
      featuredProducts.value = [
        {
          id: 1,
          title: "贵港特色手工艺品",
          description: "传统工艺，匠心制作",
          image: "https://img0.baidu.com/it/u=2703440853,2143280554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
          price: 199,
          originalPrice: 299,
          sales: 256,
          rating: Number(4.9),
          reviewCount: 125,
          tags: ["新品", "热销"],
        }
      ];
    }
  } catch (error) {
    console.error("获取文创商品失败:", error);
    // 出错时保持使用默认数据
    featuredProducts.value = [
      {
        id: 1,
        title: "贵港特色手工艺品",
        description: "传统工艺，匠心制作",
        image: "https://img0.baidu.com/it/u=2703440853,2143280554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
        price: 199,
        originalPrice: 299,
        sales: 256,
        rating: Number(4.9),
        reviewCount: 125,
        tags: ["新品", "热销"],
      }
    ];
  } finally {
    loading.value = false;
  }
};

// 处理美食收藏
const toggleFoodFavorite = async (food) => {
  if (!userStore.token) {
    ElMessageBox.confirm("需要登录才能继续操作,是否前往登录?", "提示", {
      confirmButtonText: "去登录",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        router.push({
          path: "/login",
          query: { redirect: router.currentRoute.value.fullPath },
        });
      })
      .catch(() => {});
    return;
  }

  try {
    if (food.isFavorite) {
      // 取消收藏
      await service.delete(`/user/favorites/${food.id}`);
      food.isFavorite = false;
      ElMessage.success("已取消收藏");
    } else {
      // 添加收藏
      await service.post("/user/favorites", { foodId: food.id });
      food.isFavorite = true;
      ElMessage.success("已添加到收藏");
    }
  } catch (error) {
    console.error("美食收藏操作失败:", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 摄影打卡数据
const photographySpots = ref([]);
const photographyWorks = ref([]);

// 获取摄影打卡数据
const fetchPhotographySpots = async () => {
  loading.value = true;
  try {
    // 调用摄影打卡API获取数据
    const spotsParams = {
      pageSize: 3, // 首页只显示3个摄影打卡地
      sort: "popular" // 按热门程度排序
    };
    
    const res = await service.get('/public/photography/spots', { params: spotsParams });
    console.log("首页摄影打卡API响应:", res);
    
    // 直接从res.data.items获取数据，不进行复杂判断
    if (res.data && res.data.items && Array.isArray(res.data.items)) {
      console.log("成功找到数据，共", res.data.items.length, "条记录");
      
      // 提取数据
      const spotsData = [...res.data.items];
      
      // 更新打卡地数据
      photographySpots.value = spotsData.slice(0, 3).map(spot => ({
        id: spot.id,
        name: spot.name,
        image: spot.image,
        type: spot.type || "人气打卡地",
        bestTime: spot.bestTime || "全天适宜",
        description: spot.description || "贵港精选摄影打卡地点",
        checkInCount: spot.checkInCount || Math.floor(Math.random() * 1000) + 500,
        photoCount: spot.photoCount || Math.floor(Math.random() * 2000) + 1000
      }));
      console.log("成功设置打卡地数据:", photographySpots.value);
    } else {
      // 如果未获取到数据，使用默认数据
      console.warn("未从API获取到打卡地数据，当前数据结构:", res.data);
      photographySpots.value = [
        {
          id: 1,
          name: "贵港江滨公园",
          image: "https://img2.baidu.com/it/u=2996507916,328017876&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          type: "人气打卡地",
          bestTime: "清晨或黄昏",
          description: "江滨公园沿江而建，是拍摄江景、日出的绝佳位置。",
          checkInCount: 2580,
          photoCount: 3650
        },
        {
          id: 2,
          name: "贵港古镇",
          image: "https://img0.baidu.com/it/u=1682274407,3940219929&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
          type: "网红打卡点",
          bestTime: "阴天或傍晚",
          description: "古镇老街景色优美，是拍摄人文风景的绝佳地点。",
          checkInCount: 1850,
          photoCount: 2760
        },
        {
          id: 3,
          name: "文创艺术园",
          image: "https://img2.baidu.com/it/u=1355997023,2975561394&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
          type: "新晋打卡地",
          bestTime: "全天适宜",
          description: "艺术氛围浓厚，是拍摄文艺照片的理想场所。",
          checkInCount: 960,
          photoCount: 1580
        }
      ];
    }
  } catch (error) {
    console.error("获取摄影打卡数据失败:", error);
    // 使用默认数据
    photographySpots.value = [
      {
        id: 1,
        name: "贵港江滨公园",
        image: "https://img2.baidu.com/it/u=2996507916,328017876&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        type: "人气打卡地",
        bestTime: "清晨或黄昏",
        description: "江滨公园沿江而建，是拍摄江景、日出的绝佳位置。",
        checkInCount: 2580,
        photoCount: 3650
      },
      {
        id: 2,
        name: "贵港古镇",
        image: "https://img0.baidu.com/it/u=1682274407,3940219929&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
        type: "网红打卡点",
        bestTime: "阴天或傍晚",
        description: "古镇老街景色优美，是拍摄人文风景的绝佳地点。",
        checkInCount: 1850,
        photoCount: 2760
      },
      {
        id: 3,
        name: "文创艺术园",
        image: "https://img2.baidu.com/it/u=1355997023,2975561394&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
        type: "新晋打卡地",
        bestTime: "全天适宜",
        description: "艺术氛围浓厚，是拍摄文艺照片的理想场所。",
        checkInCount: 960,
        photoCount: 1580
      }
    ];
  } finally {
    loading.value = false;
  }
};

// 获取精选摄影作品
const fetchPhotographyWorks = async () => {
  try {
    // 首先获取热门摄影打卡地
    const spotsParams = {
      pageSize: 3, // 获取3个热门打卡地
      sort: "popular" // 按热门程度排序
    };
    
    const spotsRes = await service.get('/public/photography/spots', { params: spotsParams });
    console.log("首页热门摄影打卡地API响应:", spotsRes);
    
    // 处理API响应数据，获取打卡地列表
    let spotsData = [];
    
    // 检查各种可能的数据结构
    if (spotsRes.data && spotsRes.data.content && Array.isArray(spotsRes.data.content)) {
      spotsData = [...spotsRes.data.content];
    } 
    else if (spotsRes.data && spotsRes.data.code === 200 && spotsRes.data.data && spotsRes.data.data.content && Array.isArray(spotsRes.data.data.content)) {
      spotsData = [...spotsRes.data.data.content];
    }
    else if (spotsRes.data && spotsRes.data.data && spotsRes.data.data.records && Array.isArray(spotsRes.data.data.records)) {
      spotsData = [...spotsRes.data.data.records];
    }
    else if (spotsRes.data && spotsRes.data.data && Array.isArray(spotsRes.data.data)) {
      spotsData = [...spotsRes.data.data];
    }
    else if (spotsRes.data && Array.isArray(spotsRes.data)) {
      spotsData = [...spotsRes.data];
    }
    // 特殊处理返回格式为 {code:200, data:{items:[]}} 的情况
    else if (spotsRes.data && spotsRes.data.code === 200 && spotsRes.data.data && spotsRes.data.data.items && Array.isArray(spotsRes.data.data.items)) {
      spotsData = [...spotsRes.data.data.items];
    }
    
    // 如果成功获取到打卡地数据
    if (spotsData.length > 0) {
      // 限制最多3个打卡地
      spotsData = spotsData.slice(0, 3);
      
      // 由于还没有相关API获取打卡地的作品，先使用默认图片
      // 将来连接真实API后可以替换这部分逻辑
      const defaultImages = [
        "https://images.pexels.com/photos/1834399/pexels-photo-1834399.jpeg",
        "https://images.pexels.com/photos/3225531/pexels-photo-3225531.jpeg",
        "https://images.pexels.com/photos/2583852/pexels-photo-2583852.jpeg",
        "https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg",
        "https://images.pexels.com/photos/6039251/pexels-photo-6039251.jpeg",
        "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg"
      ];
      
      // 为每个打卡地生成两张作品
      let allWorks = [];
      spotsData.forEach((spot, spotIndex) => {
        // 每个打卡地两张作品
        for (let i = 0; i < 2; i++) {
          const imageIndex = spotIndex * 2 + i;
          allWorks.push({
            id: spot.id * 100 + i,
            title: `${spot.name}美景`,
            imageUrl: defaultImages[imageIndex % defaultImages.length],
            authorName: "摄影爱好者",
            authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/" + ((spotIndex * 2 + i) * 5 + 10) + ".jpg",
            likes: Math.floor(Math.random() * 100 + 50),
            spotId: spot.id,
            spotName: spot.name
          });
        }
      });
      
      // 更新作品数据
      if (allWorks.length > 0) {
        photographyWorks.value = allWorks;
      }
    }
    
    // 如果没有获取到任何作品或打卡地，使用默认数据
    if (photographyWorks.value.length === 0) {
      photographyWorks.value = [
        {
          id: 1,
          title: "晨曦中的江面",
          imageUrl: "https://images.pexels.com/photos/1834399/pexels-photo-1834399.jpeg",
          authorName: "摄影爱好者",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/32.jpg",
          likes: 245,
          spotId: 1,
          spotName: "贵港江滨公园"
        },
        {
          id: 2,
          title: "日落金辉",
          imageUrl: "https://images.pexels.com/photos/3225531/pexels-photo-3225531.jpeg",
          authorName: "日落摄影师",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/22.jpg",
          likes: 198,
          spotId: 1,
          spotName: "贵港江滨公园"
        },
        {
          id: 3,
          title: "雾中山水",
          imageUrl: "https://images.pexels.com/photos/2583852/pexels-photo-2583852.jpeg",
          authorName: "风光摄影师",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/56.jpg",
          likes: 186,
          spotId: 2,
          spotName: "贵港桂平西山"
        },
        {
          id: 4,
          title: "古镇街景",
          imageUrl: "https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg",
          authorName: "古镇爱好者",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/45.jpg",
          likes: 142,
          spotId: 2,
          spotName: "贵港桂平西山"
        },
        {
          id: 5,
          title: "湖面倒影",
          imageUrl: "https://images.pexels.com/photos/6039251/pexels-photo-6039251.jpeg",
          authorName: "自然摄影师",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/26.jpg",
          likes: 125,
          spotId: 3,
          spotName: "贵港大圩古镇"
        },
        {
          id: 6,
          title: "宁静湖泊",
          imageUrl: "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg",
          authorName: "艺术摄影师",
          authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/30.jpg",
          likes: 112,
          spotId: 3,
          spotName: "贵港大圩古镇"
        }
      ];
    }
  } catch (error) {
    console.error("获取精选摄影作品失败:", error);
    // 使用默认数据
    photographyWorks.value = [
      {
        id: 1,
        title: "晨曦中的江面",
        imageUrl: "https://images.pexels.com/photos/1834399/pexels-photo-1834399.jpeg",
        authorName: "摄影爱好者",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/32.jpg",
        likes: 245,
        spotId: 1,
        spotName: "贵港江滨公园"
      },
      {
        id: 2,
        title: "日落金辉",
        imageUrl: "https://images.pexels.com/photos/3225531/pexels-photo-3225531.jpeg",
        authorName: "日落摄影师",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/22.jpg",
        likes: 198,
        spotId: 1,
        spotName: "贵港江滨公园"
      },
      {
        id: 3,
        title: "雾中山水",
        imageUrl: "https://images.pexels.com/photos/2583852/pexels-photo-2583852.jpeg",
        authorName: "风光摄影师",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/56.jpg",
        likes: 186,
        spotId: 2,
        spotName: "贵港桂平西山"
      },
      {
        id: 4,
        title: "古镇街景",
        imageUrl: "https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg",
        authorName: "古镇爱好者",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/male/45.jpg",
        likes: 142,
        spotId: 2,
        spotName: "贵港桂平西山"
      },
      {
        id: 5,
        title: "湖面倒影",
        imageUrl: "https://images.pexels.com/photos/6039251/pexels-photo-6039251.jpeg",
        authorName: "自然摄影师",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/26.jpg",
        likes: 125,
        spotId: 3,
        spotName: "贵港大圩古镇"
      },
      {
        id: 6,
        title: "宁静湖泊",
        imageUrl: "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg",
        authorName: "艺术摄影师",
        authorAvatar: "https://xsgames.co/randomusers/assets/avatars/female/30.jpg",
        likes: 112,
        spotId: 3,
        spotName: "贵港大圩古镇"
      }
    ];
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  @apply min-h-screen bg-white dark:bg-gray-900;

  .main-content {
    @apply pb-12;
  }

  .banner-section {
    @apply relative;
    height: min(450px, 60vh);

    .banner-wrapper {
      @apply h-full;

      :deep(.carousel-wrapper) {
        @apply h-full;

        .el-carousel__container {
          @apply h-full;
        }

        .el-carousel__item {
          @apply h-full;
        }

        .carousel-image {
          @apply h-full w-full object-cover;
          filter: brightness(0.85);
        }

        .caption-title {
          @apply text-4xl md:text-5xl font-bold text-white mb-4;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          animation: fadeInUp 0.8s ease-out;
        }

        .caption-description {
          @apply text-lg md:text-xl text-gray-100 mb-6;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
          animation: fadeInUp 0.8s ease-out 0.2s backwards;
        }

        .caption-action {
          animation: fadeInUp 0.8s ease-out 0.4s backwards;
        }

        .banner-control-btn {
          @apply opacity-0 transition-opacity duration-300;
        }

        &:hover {
          .banner-control-btn {
            @apply opacity-100;
          }
        }
      }
    }
  }

  .quick-nav {
    @apply transition-all duration-300 ease-in-out;

    .nav-grid {
      @apply grid gap-4 px-4 bg-white dark:bg-gray-800 rounded-xl shadow-xl;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

      @screen sm {
        @apply grid-cols-2;
      }

      @screen md {
        @apply grid-cols-4;
      }

      .nav-item {
        @apply p-6 text-center cursor-pointer 
               transform transition-all duration-300 hover:scale-105
               flex flex-col items-center justify-center
               border-r border-gray-100 dark:border-gray-700 last:border-r-0;

        .nav-icon {
          @apply text-4xl text-primary-600 mb-4 transform transition-transform duration-300;
        }

        &:hover .nav-icon {
          @apply scale-110;
        }

        .nav-text {
          @apply block text-lg font-medium text-gray-900 dark:text-gray-100 mb-2;
        }

        .nav-desc {
          @apply block text-sm text-gray-500 dark:text-gray-400;
        }
      }
    }
  }

  .spots-grid {
    @apply grid gap-6 mt-8;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    @screen md {
      grid-template-columns: repeat(2, 1fr);
    }

    @screen lg {
      grid-template-columns: repeat(3, 1fr);
    }

    .spot-card {
      @apply bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md cursor-pointer 
             transition-all duration-300 hover:shadow-xl hover:transform hover:scale-105;

      .spot-image {
        @apply w-full h-64 object-cover;
      }

      .spot-info {
        @apply p-4 space-y-2;

        .spot-title {
          @apply text-lg font-medium text-gray-900 dark:text-gray-100;
        }

        .spot-desc {
          @apply text-sm text-gray-600 dark:text-gray-400 line-clamp-2;
        }

        .spot-meta {
          @apply flex items-center justify-between mt-4;

          .price {
            @apply text-lg font-bold text-primary-600;
          }
        }
      }

      .favorite-btn {
        @apply bg-white/80 hover:bg-white text-lg;

        &.is-favorite {
          @apply text-red-500;
        }
      }
    }
  }

  .products-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8;
  }

  .guides-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6 mt-8;

    .guide-card {
      @apply flex bg-white dark:bg-gray-800 rounded-lg overflow-hidden cursor-pointer
             border border-gray-200 dark:border-gray-700
             shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)]
             transition-all duration-300;

      &:hover {
        @apply transform -translate-y-1
               shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)]
               border-gray-300 dark:border-gray-600;
      }

      .guide-content {
        @apply flex-1 p-4;

        .guide-header {
          @apply flex items-center space-x-3 mb-4;

          .author-info {
            @apply flex flex-col;

            .author-name {
              @apply font-medium text-gray-900 dark:text-white;
            }

            .publish-time {
              @apply text-sm text-gray-500 dark:text-gray-400;
            }
          }
        }

        .guide-title {
          @apply text-lg font-medium text-gray-900 dark:text-white mb-2 
                 transition-colors duration-300 hover:text-primary-600 dark:hover:text-primary-400;
        }

        .guide-summary {
          @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
        }

        .guide-stats {
          @apply flex items-center space-x-4;

          .stat-item {
            @apply flex items-center text-sm text-gray-500 dark:text-gray-400;

            .el-icon {
              @apply mr-1 text-gray-400 dark:text-gray-500;
            }
          }
        }
      }

      .guide-cover {
        @apply w-1/3 object-cover dark:brightness-90;
      }
    }
  }

  .news-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6 mt-8;

    .news-card {
      @apply bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md cursor-pointer hover:shadow-lg transition-shadow;

      .news-image {
        @apply w-full h-48 object-cover;
      }

      .news-content {
        @apply p-4;

        .news-meta {
          @apply flex items-center justify-between mb-2;

          .news-category {
            @apply px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-300 text-sm rounded;
          }

          .news-date {
            @apply text-sm text-gray-500 dark:text-gray-400;
          }
        }

        .news-title {
          @apply text-lg font-medium text-gray-900 dark:text-gray-100 mb-2;
        }

        .news-summary {
          @apply text-sm text-gray-600 dark:text-gray-400 line-clamp-2;
        }
      }
    }
  }

  .reviews-section {
    @apply relative;

    .reviews-grid {
      @apply grid grid-cols-1 gap-6 mt-8;
      max-width: 100%;
    }

    .review-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-all duration-300;
      max-width: 600px;

      &:hover {
        @apply shadow-lg -translate-y-1;
      }

      .review-header {
        @apply flex items-center mb-4;

        .review-avatar {
          @apply border-2 border-white dark:border-gray-700 shadow-sm mr-4;
        }

        .review-user {
          @apply flex flex-col;

          .user-name {
            @apply text-base font-medium text-gray-900 dark:text-gray-100 mb-1;
          }

          .review-rating {
            :deep(.el-rate__icon) {
              font-size: 16px;
              margin-right: 2px;
              color: #ffd21e;
              &.is-active {
                color: #ffd21e;
              }
              &.is-half {
                color: #ffd21e;
              }
            }
          }
        }
      }

      .review-content {
        @apply text-gray-600 dark:text-gray-300 text-base leading-relaxed mb-4;
      }

      .review-footer {
        @apply flex items-center justify-between text-sm text-gray-500 dark:text-gray-400;

        .review-spot,
        .review-time {
          @apply flex items-center;

          .el-icon {
            @apply mr-1 text-gray-400 dark:text-gray-500;
          }
        }
      }
    }
  }

  .products-section {
  }

  .news-section {
  }

  :deep(.el-rate) {
    .el-rate__icon {
      &.el-icon {
        @apply text-yellow-400 dark:text-yellow-500;
      }
    }
  }

  :deep(.section-title) {
    .title {
      @apply text-gray-900 dark:text-white font-bold;
    }
    .subtitle {
      @apply text-gray-500 dark:text-gray-300 font-medium;
    }
    .description {
      @apply text-gray-600 dark:text-gray-400;
    }
    .more-text {
      @apply text-primary-600 dark:text-primary-400;
    }
  }

  :deep(.el-carousel__item) {
    .el-image {
      @apply dark:brightness-90;
    }
  }

  :deep(.el-button) {
    &.el-button--primary {
      @apply dark:border-primary-600 dark:bg-primary-600 dark:text-white;
      &:hover {
        @apply dark:border-primary-500 dark:bg-primary-500;
      }
    }
    &.el-button--text {
      @apply dark:text-gray-300;
      &:hover {
        @apply dark:text-gray-100;
      }
    }
  }

  :deep(.el-pagination) {
    @apply dark:bg-transparent;
    .el-pagination__total {
      @apply dark:text-gray-400;
    }
    .el-pagination__jump {
      @apply dark:text-gray-400;
    }
    .el-input__inner {
      @apply dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600;
    }
    button {
      @apply dark:bg-transparent dark:text-gray-400;
      &:disabled {
        @apply dark:text-gray-600;
      }
    }
    .el-pager li {
      @apply dark:bg-transparent dark:text-gray-400;
      &.active {
        @apply dark:text-primary-500;
      }
    }
  }

  .spot-card {
    @apply bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-300;

    .spot-image {
      @apply w-full h-64 object-cover;
    }

    .spot-info {
      @apply p-4 space-y-2;

      .spot-title {
        @apply text-lg font-medium text-gray-900 dark:text-gray-100;
      }

      .spot-desc {
        @apply text-sm text-gray-600 dark:text-gray-400 line-clamp-2;
      }

      .spot-meta {
        @apply flex items-center justify-between mt-4;

        .price {
          @apply text-lg font-bold text-primary-600;
        }
      }
    }

    .favorite-btn {
      @apply bg-white/80 hover:bg-white text-lg;

      &.is-favorite {
        @apply text-red-500;
      }
    }
  }

  .experience-card {
    @apply cursor-pointer;

    .el-image {
      @apply h-64;
    }

    &:hover {
      .el-image {
        @apply transform scale-105;
      }
    }

    :deep(.el-tag) {
      &.el-tag--success {
        @apply dark:bg-green-900/60 dark:text-green-300 dark:border-green-700;
      }
      &.el-tag--warning {
        @apply dark:bg-yellow-900/60 dark:text-yellow-300 dark:border-yellow-700;
      }
    }
  }

  .destination-card {
    .el-image {
      @apply h-64;
    }

    &:hover {
      .el-image {
        @apply transform scale-105;
      }
    }
  }

  .tool-card {
    &:hover {
      @apply transform -translate-y-1;
    }

    :deep(.tool-icon) {
      @apply text-5xl mb-3;
      font-size: 2.5rem;
      width: 2rem;
      height: 2rem;
    }
  }

  .weather-card {
    @apply backdrop-blur-lg bg-opacity-90;
  }

  :deep(.spot-rating) {
    display: inline-flex;
    align-items: center;
    .el-rate__icon {
      font-size: 16px;
      margin-right: 2px;
      &.is-active {
        color: #ffd21e;
      }
      &.is-half {
        color: #ffd21e;
      }
      &.is-void {
        color: rgba(255, 255, 255, 0.4);
      }
    }
    .el-rate__text {
      color: #ffffff;
      margin-left: 8px;
    }
  }

  :deep(.hotel-rating) {
    display: inline-flex;
    align-items: center;
    .el-rate__icon {
      font-size: 16px;
      margin-right: 2px;
      &.is-active {
        color: #ffd21e;
      }
      &.is-half {
        color: #ffd21e;
      }
      &.is-void {
        color: rgba(128, 128, 128, 0.4);
      }
    }
    .el-rate__text {
      color: #ff6b00;
      margin-left: 8px;
    }
  }

  :deep(.review-rating) {
    display: inline-flex;
    align-items: center;
    .el-rate__icon {
      font-size: 16px;
      margin-right: 2px;
      &.is-active {
        color: #ffd21e;
      }
      &.is-half {
        color: #ffd21e;
      }
      &.is-void {
        color: rgba(128, 128, 128, 0.4);
      }
    }
    .el-rate__text {
      color: #ff6b00;
      margin-left: 8px;
    }
  }
}

.image-placeholder {
  @apply w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-800;

  .el-icon {
    @apply text-3xl text-gray-400 dark:text-gray-600;
  }
}

.sidebar {
  @apply hidden lg:block;

  .sidebar-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-100 dark:border-gray-700;
  }

  .sidebar-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-4;
  }

  .tool-card {
    &:hover {
      @apply transform -translate-y-1;
    }
  }

  .sidebar-sticky {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-banner {
  @apply py-12 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700;
  position: relative;
  overflow: hidden;

  .container {
    position: relative;
    z-index: 1;
  }

  h1 {
    @apply text-white dark:text-white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  p {
    @apply text-blue-100 dark:text-blue-200;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}
</style>
